<template>
  <div class="charge_inquiry">
    <!--搜索栏-->
    <div class="searchBox">
      <el-select v-model="value" placeholder="请选择项目类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value" placeholder="请选择收费项目" style="margin-left: 10px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value" placeholder="请选择机构" style="margin-left: 10px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-input
        placeholder="请输入用户名进行搜素"
        style="width: 220px;margin-left: 20px;">
      </el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
    </div>

    <div class="DateBox">
      <el-select v-model="statusAll" placeholder="全部状态">
        <el-option label="全部缴费" value="全部缴费"></el-option>
        <el-option label="待缴费" value="待缴费"></el-option>
        <el-option label="已缴费" value="已缴费"></el-option>
        <el-option label="缴费失败" value="缴费失败"></el-option>
        <el-option label="交易未明" value="交易未明"></el-option>
      </el-select>
      <el-date-picker
        v-model="value2"
        align="right"
        type="date"
        placeholder="请选择开始日期"
        style="margin-left: 10px;"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-date-picker
        v-model="value2"
        align="right"
        type="date"
        placeholder="请选择结束日期"
        style="margin-left: 10px;"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <!--导出按钮-->
    <el-row type="flex" class="table_btn">
      <el-col :span="24" class="btnTypeSet">
        <el-button type="danger" icon="el-icon-plus">导出</el-button>
      </el-col>
    </el-row>

  <el-table
    ref="multipleTable"
    size="mini"
    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    @row-click="handleRowHandle"
    style="width: 100%;cursor: pointer">
    <el-table-column
      label="缴费编号"
      align="center"
      width="100">
      <template slot-scope="scope">{{ scope.row.number }}</template>
    </el-table-column>
    <el-table-column
      label="用户姓名"
      align="center"
      width="100">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="所属机构"
      align="center"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.organization }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="收费项目"
      align="center"
      width="200">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.payItem }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="应缴金额"
      align="center"
      width="100">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.shouldPay }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="实缴金额"
      align="center"
      width="100">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.payed }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="缴费状态"
      align="center"
      width="100">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.status }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="deleteRow(scope.$index, tableData)">删除</el-button>
        <!--@click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>-->
        <el-button
          size="mini"
          type="primary">催缴</el-button>
      </template>
    </el-table-column>

  </el-table>

  <div class="footerBox">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
  </div>
</template>

<script>

  export default {
    data(){
        return {
          statusAll:'',
          options: [
            {
              value: '选项1',
              label: '1'
            }
            ,
            {
              value: '选项2',
              label: '2'
            },
            {
              value: '选项3',
              label: '3'
            },
            {
              value: '选项4',
              label: '4'
            },
            {
              value: '选项5',
              label: '5'
            }],
          value: '',
          currentPage: 1,
          pageSize: 10,
          tableData: [
            {
              number : "编号1",
              name : "测试1",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "待缴费",
              payItem : "10月份住宿费"
            },
            {
              number : "编号2",
              name : "测试2",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "已缴费",
              payItem : "10月份住宿费"
            },
            {
              number : "编号3",
              name : "测试3",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "交易未明",
              payItem : "10月份住宿费"
            },
            {
              number : "编号4",
              name : "测试4",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "缴费失败",
              payItem : "10月份住宿费"
            },
            {
              number : "编号5",
              name : "测试5",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "待缴费",
              payItem : "10月份住宿费"
            },
            {
              number : "编号6",
              name : "测试6",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "已缴费",
              payItem : "10月份住宿费"
            },
            {
              number : "编号7",
              name : "测试7",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "缴费失败",
              payItem : "10月份住宿费"
            },
            {
              number : "编号8",
              name : "测试8",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "交易未明",
              payItem : "10月份住宿费"
            },
            {
              number : "编号9",
              name : "测试9",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "缴费失败",
              payItem : "10月份住宿费"
            },
            {
              number : "编号10",
              name : "测试10",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "已缴费",
              payItem : "10月份住宿费"
            },
            {
              number : "编号11",
              name : "测试11",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "交易未明",
              payItem : "10月份住宿费"
            },
            {
              number : "编号12",
              name : "测试12",
              organization:"济南税务局",
              shouldPay : 100,
              payed : 0,
              status : "缴费失败",
              payItem : "10月份住宿费"
            },
          ],
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }, {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }]
          },
          value2: '',
        }
    },
    methods:{
      deleteRow: function(index, rows) {
        var that = this;
        that.$confirm('确认删除此角色吗？','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          rows.splice(index, 1);
          that.$message({
            type: 'success',
            message: '删除成功!',
          });
        }).catch(function () {
          that.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      handleSizeChange: function (size) {
        this.pageSize = size;
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
      },
      handleRowHandle:function (row,event,column) {
//        console.log(row);
//        console.log(event);
//        console.log(column);
        if(column.label==='操作'){
          return
        } else {
          this.$router.push(
            {
              path : '/charge_management/charge_info',
              query: {row:row}
            }
          );
        }
      }
    }
  }
</script>

<style>
  .charge_inquiry .searchBox{
    height: 60px;
    line-height: 60px;
    text-align: left;
    padding-left: 30px;
    background: #fff;
  }
  .charge_inquiry .DateBox{
    height: 60px;
    line-height: 60px;
    text-align: left;
    padding-left: 30px;
    margin-bottom: 10px;
    background: #fff;
  }
  .charge_inquiry .table_btn{
    height: 60px;
    margin-bottom: 10px;
    text-align: right;
    background: #fff;
    padding: 10px 20px 30px;
  }
  .charge_inquiry .footerBox{
    width: 100%;
    height: 50px;
    text-align: right;
    background-color: #fff;
    padding-top: 9px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
</style>
